import React, {useState,useEffect} from "react";
import { trim} from "lodash";
import Modal from "antd/lib/modal";
import Form from "antd/lib/form";
import Input from "antd/lib/input";
import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
import DynamicComponent from "@/components/DynamicComponent";
import {UserProfile} from "@/components/proptypes";
import Workflow_state from "@/services/workflow_state";
import notification from "@/services/notification";
import {currentUser} from "@/services/auth";

function CreateStateDialog({ state_id, dialog }) {
  const [name, setName] = useState("");
  const [docstatus, setDocstatus] = useState(1);
  const [isValid, setIsValid] = useState(false);
  const [saveInProgress, setSaveInProgress] = useState(false);
  const isCreateStateEnabled = useState(true);//policy.isAdmin() || policy.isDefault();

  useEffect(() => {
    if (state_id === 0) return;
    let cancelLoading = false;
    Workflow_state.get({id:state_id}).then(data => {
      if (!cancelLoading) {
        setName(data.name);
        setDocstatus(data.docstatus)
    }});

    return () => {
      cancelLoading = true;
    };
  }, [state_id]);


  function handleNameChange(event) {
    const value = trim(event.target.value);
    setName(value);
    setIsValid(value !== "");
  }
  function handleSubmit() {
    if(docstatus !==1){
      notification.error("开始和结束状态不能修改");
      return;
    }
    setSaveInProgress(true);
    let params={
      id: state_id,
      userid: currentUser.id,
      docstatus:docstatus,
      name: name,
    }
    if (state_id === 0) {
      Workflow_state.create(params)
        .then(() => {
          dialog.close({ success: true});
        })
        .catch(error => {
          notification.error(error.message, error.detailedMessage);
          setSaveInProgress(false);
        });
    } else {
      Workflow_state.save(params)
        .then(() => {
          dialog.close({ success: true});
        })
        .catch(error => {
          notification.error(error.message, error.detailedMessage);
          setSaveInProgress(false);
        });
    }
  }

  return (
    <Modal
      {...dialog.props}
      {...(isCreateStateEnabled ? {} : { footer: null })}
      title="状态"
      okText="保存"
      cancelText="取消"
      okButtonProps={{
        disabled: !isValid || saveInProgress,
        loading: saveInProgress,
        "data-test": "DashboardSaveButton",
      }}
      cancelButtonProps={{
        disabled: saveInProgress,
      }}
      onOk={handleSubmit}
      closable={!saveInProgress}
      maskClosable={!saveInProgress}
      wrapProps={{
        "data-test": "CreateDashboardDialog",
      }}>
      <DynamicComponent name="CreateStateDialogExtra" disabled={!isCreateStateEnabled}>
      <Form>
        <Form.Item style={{ marginBottom: 5 }} label="名称">
        <Input
          value={name}
          onChange={handleNameChange}
          placeholder="名称"
          disabled={saveInProgress}
        />
        </Form.Item>
      </Form>
      </DynamicComponent>
    </Modal>
  );
}

CreateStateDialog.propTypes = {
  state_id: UserProfile.isRequired,
  dialog: DialogPropType.isRequired,
};

export default wrapDialog(CreateStateDialog);
